<template>
  <div class="w-full overflow-auto">
    <div class="px-10 py-[22px] bg-[#1F2329] shadow-[0_2px_8px_0px_rgba(0,0,0,0.25)] flex text-white justify-between items-center">
      <div class="flex-1 flex items-center">
        <span class="mr-8 text-xl font-[600] leading-5">{{ courseData.name }}</span>
        <div class="flex items-center gap-2 mr-8 cursor-pointer">
          <img v-if="!courseData.like" class="rotate-180" src="../../assets/images/thumbs-down2.png" alt=""
            @click="setCourseLike('like')">
          <img v-else src="../../assets/images/thumbs-up.png" alt="">
          <span>{{ courseData.like_count }}</span>
        </div>
        <div class="flex items-center gap-2 cursor-pointer">
          <img v-if="!courseData.dislike" src="../../assets/images/thumbs-down2.png" alt=""
            @click="setCourseLike('dislike')">
          <img v-else class="rotate-180" src="../../assets/images/thumbs-up.png" alt="">
          <span></span>
        </div>
      </div>
      <div class="px-4 py-[6px] rounded-[6px] text-[#fff]  flex items-center cursor-pointer" @click="goBack">
        <el-icon class="mr-1">
          <Back />
        </el-icon>
        返回
      </div>
    </div>
    <div class="p-8 bg-custom-text flex items-start">
      <div class="flex-1">
        <vue3videoPlay v-if="videoOptions.src" v-bind="videoOptions"
          @timeupdate="timeupdate" />
      </div>
      <div class="w-[320px] px-4 py-[35px] bg-[#1F2329] h-full">
        <div class="flex items-center mb-6">
          <img src="@/assets/images/bookmark-3-fill.png" alt="">
          <span class="text-[18px] leading-[26px] text-white ml-2">涉及知识点</span>
        </div>
        <div class="">
          <div class="bg-[#404652] px-6 py-2 rounded-[4px] text-white leading-6 text-[16px] mb-2"
            v-for="item in courseData.points" :key="item.id">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white h-16 w-full px-[160px] leading-[64px]">
      <span :class="activeName === '1' ? 'tab-active-item' : 'tab-item'" @click="changeTabs('1')">课程简介</span>
      <span :class="activeName === '2' ? 'tab-active-item' : 'tab-item'" @click="changeTabs('2')">课程讲师</span>
    </div>
    <div class="mx-[160px] my-6 p-6 bg-white rounded-[6px]">
      <div v-if="activeName === '1'" v-html="courseData.desc"></div>
      <div v-else-if="activeName === '2'">
        <div class="text-xl text-custom-text leading-7 mb-6">讲师</div>
        <div class="grid grid-cols-4 gap-4">
          <div
            class="p-[14px] shadow-[0_2px_8px_0px_rgba(0,0,0,0.05)] hover:shadow-[0_2px_8px_0px_rgba(0,0,0,0.25)] rounded-[6px] cursor-pointer"
            @click="openDetail">
            <div class="w-full">
              <img :src="teacherData.avatar || teacher" alt="">
            </div>
            <div class="flex items-center mb-2">
              <span class="text-[18px] text-custom-text leading-6 mr-1">{{ teacherData.name }}</span>
              <span class="px-2 py-0.5 bg-custom-blue/[.06] text-[14px] leading-6 text-custom-blue rounded-1">{{
                teacherData.company }}</span>
            </div>
            <div class="text-[14px] text-custom-text-65 leading-[22px]">
              {{ teacherData.introduction }}
            </div>
          </div>
        </div>
      </div>
      <div v-else class="">
        <div class="text-custom-text-65 text-[16px] leading-6 cursor-pointer flex items-center"
          @click="activeName = '2'">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          返回
        </div>
        <div class="flex">
          <div class="w-[200px] mr-6">
            <img :src="teacherData.avatar || teacher" alt="">
          </div>
          <div class="flex-1">
            <div class="text-[24px] text-custom-text leading-6 mr-1 mb-2">{{ teacherData.name }}</div>
            <div
              class="px-2 py-0.5 bg-custom-blue/[.06] text-[14px] leading-6 text-custom-blue rounded-1 mb-3 inline-block">
              {{ teacherData.company }}</div>
            <div class="mb-2">
              <span class="text-custom-text-45 leading-[22px]">手机号码：</span>
              <span class="text-custom-text leading-[22px]">{{ teacherData.mobile }}</span>
            </div>
            <div>
              <span class="text-custom-text-45 leading-[22px]">教师简介：</span>
              <span class="text-custom-text leading-[22px]">{{ teacherData.introduction }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import teacher from '@/assets/images/teacher.png'
import vue3videoPlay from 'vue3-video-play'
import 'vue3-video-play/dist/style.css'
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ArrowLeft } from "@element-plus/icons-vue";
import { examApi } from "@/api/index.js";

const route = useRoute()
const router = useRouter()
const { id } = route.params
const courseData = ref({})
const teacherData = ref({})
const currentTime = ref(0)
const duration = ref(0)
const activeName = ref('1')
const videoOptions = ref({});
onMounted(() => {
  getCourseDetail()
})
onBeforeUnmount(() => {
  const params = {
    process: currentTime.value,
    duration: duration.value,
    course_id: id
  }
  examApi.setCourseStudy(params).then(res => {

  })
})

//获取课程详情
const getCourseDetail = () => {
  examApi.getCourseDetail(id).then(res => {
    courseData.value = res
    teacherData.value = res.teacher
    videoOptions.value = {
      height: "450px", //播放器高度
      color: "#409eff", //主题色
      title: "", //视频名称
      currentTime: 60,
      src: res.video,
      poster: res.cover,
      muted: false, //静音
      webFullScreen: false,
      autoPlay: false, //自动播放
      loop: false, //循环播放
      mirror: false, //镜像画面
      ligthOff: false, //关灯模式
      volume: 0.3, //默认音量大小
      control: true, //是否显示控制
      controlBtns: [
        "volume",
        "fullScreen",
      ],
    }
  })
}

//点赞、点踩
const setCourseLike = (type) => {
  const params = {
    course_id: id,
    like: type === 'like',
    dislike: type === 'dislike'
  }
  examApi.setCourseLike(params).then(() => {
    courseData.value.like = (type === 'like');
    courseData.value.dislike = (type !== 'like');
    if (type === 'like') {
      courseData.value.like_count++
    } else {
      if (courseData.value.like_count > 0) {
        courseData.value.like_count--
      } else {
        courseData.value.like_count = 0
      }
    }

  })
}
//获取视频进度
const timeupdate = (e) => {
  duration.value = e.target.duration || 0
  currentTime.value = e.target.currentTime || 0
}
const changeTabs = (type) => {
  activeName.value = type
}
const openDetail = () => {
  activeName.value = '3'
}

//返回
const goBack = () => {
  router.back()
}

</script>